document.querySelector('.video ul').onclick = function() {
    document.body.style.overflow = 'hidden'
    document.querySelector('.video-wrapper').style.display = 'block'
}
document.querySelector('.video-wrapper .close').onclick = function() {
    document.body.style.overflow = 'auto'
    document.querySelector('.video-wrapper').style.display = 'none'

    document.querySelector('.video-wrapper video').pause()
}
let cols = [
    {left:0, top: 0},
    {left:254, top: 0},
    {left:254*2, top: 0},
    {left:254*3, top: 0},
]
let videoHeight = 0

function Waterfall()
{
    for (let num=1; num<=56; num++) 
    {
        let liObj = document.createElement('li')
        liObj.style.position = 'absolute'
        liObj.style.display = 'none'
        liObj.innerHTML = `
            <div>
                <img src="./assets/imgs2/${num}.jpg" alt="">
            </div>
            <span>${num} 初秋絮语，用音乐记下你的点点滴滴</span>
            <p>
                <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
            </p>
        `
        document.querySelector('.video ul').appendChild(liObj)
        liObj.querySelector('img').onload = function() {
            let minHeightIndex =  0
            cols.forEach((item,i) => {
                if (cols[minHeightIndex].top > item.top)
                {
                    minHeightIndex = i
                }
            })
            liObj.style.display = 'block' 
            liObj.style.left = cols[minHeightIndex].left + 'px'
            liObj.style.top = cols[minHeightIndex].top + 'px'
            cols[minHeightIndex].top += liObj.offsetHeight    
            videoHeight = cols[minHeightIndex].top
        }
    }
}
window.onscroll = function() {
    let clientHeight = window.innerHeight || document.documentElement.clientHeight
    let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop 

    if (clientHeight + scrollHeight >= videoHeight)
    {
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        Waterfall()
    }
}
window.addEventListener('load', Waterfall)